<template>
	<view>
		<view class="formlist inputtext" @tap.stop="showMulLinkageThreePicker">
			<view class="formgroup border-bottom-E3E3E5">
				<view class="labletitle" v-if="showLabel">
					<label>{{label}}</label>
					<text class="required" v-show="required">*</text>
				</view>
				<view class="controlvalue">
					<input type="text" v-model="valueTitle" disabled="true">
				</view>
				<view class="advanceicon iconfont icon-xiangyou"></view>
			</view>
		</view>
		<mpvue-city-picker :themeColor="themeColor" ref="CityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm">
		 </mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	export default {
		components:{
			mpvueCityPicker
		},
		props:{
			value:{
				type:Array,
				default (){
					return []
				}
			},
			jnpfKey:{
				type:String,
				default(){
					return ''
				}
			},
			vModel:{
				type:String,
				default(){
					return ''
				}
			},
			placeholder:{
				type:String,
				default(){
					return '请选择'
				}
			},
			label:{
				type:String,
				default(){
					return ''
				}
			},
			disabled:{
				type:Boolean,
				default(){
					return false
				}
			},
			required:{
				type:Boolean,
				default(){
					return false
				}
			},
			showLabel:{
				type:Boolean,
				default(){
					return true
				}
			},
		},
		data() {
			return {
				themeColor: '#007AFF',
				cityPickerValueDefault: [0, 0, 1],
				valueTitle:'',
				// cityId:[],
				// cityDetail:{}
			};
		},
		mounted() {
			var res;
			if(this.value.length > 0){
				let newArr = [];
				for(let i = 0;i<this.value.length;i++){
					newArr.push(this.value[i])
				}
				
				res = this.$refs.CityPicker.queryIndex(newArr,'value');
				
				this.cityPickerValueDefault = res.index;
				let valueArr=[];
				for(let i in res.data){
					switch(i){
						case 'province':
						valueArr.push(res.data[i].label);
						break;
						case 'city':
						valueArr.push(res.data[i].label);
						break;
						case 'area':
						valueArr.push(res.data[i].label);
						break;
					}
					this.valueTitle = valueArr.join('/');
				}
			}
		},
		watch:{
			value(val){
				
				var res;
				if(val.length != 0){
					res = this.$refs.CityPicker.queryIndex(val,'value');
					this.cityPickerValueDefault = res.index;
					let valueArr=[];
					for(let i in res.data){
						switch(i){
							case 'province':
							valueArr.push(res.data[i].label);
							break;
							case 'city':
							valueArr.push(res.data[i].label);
							break;
							case 'area':
							valueArr.push(res.data[i].label);
							break;
						}
						this.valueTitle = valueArr.join('/');
					}
				}
			}
		},
		methods:{
			/* 区域选择 */
			showMulLinkageThreePicker() {
				this.$refs.CityPicker.open()
			},
			/* 区域点击确定 */
			onConfirm(e) {
				let label = e.label;
				this.valueTitle = label.toString()
				let value = [];
				value.push(e.provinceCode);
				value.push(e.cityCode);
				value.push(e.areaCode);
				this.$emit('input',value)
			},
			/* 区域点击取消 */
			onCancel(e) {
				
			},
		}
	}
</script>

<style>
	.required{
		color: red;
	}
</style>
